<template>
	<view class="flex-col" :class="$attrs">
		<view class="flex item-center h-20">
			<text class="flex-shrink text-color-hint">{{sort+1}}、</text>
			<input
				:value="title"
				:disabled="disabled"
				:maxlength="10"
				class="flex-1 w-0"
				placeholder="请填写标题"
				placeholder-class="text-color-hint"
				@input="onInput"
			/>
			<image class="w-16 h-16 ml-4 flex-shrink" src="@/static/svg/icon-edit-gray.svg"></image>
		</view>
		<!-- <input class="h-25 bg-white radius-4 px-20 fs-12 mt-12" disabled placeholder="请输入" placeholder-class="text-color-hint" /> -->
		<view class="flex justify-between item-center h-20 mt-12">
			<view class="flex item-center" @click="onCheckChange(mustState!==2)">
				<image v-if="mustState===2" class="w-14 h-14 mr-4" src="@/static/svg/checkbox-checked.svg"></image>
				<image v-else class="w-14 h-14 mr-4" src="@/static/svg/checkbox-default.svg"></image>
				<text>必填</text>
			</view>
			<view class="flex item-center text-color-regular">
				<view class="" :class="sort===0 ? 'text-color-hint' : ''" @click="onActionClick('up')"><text>上移</text></view>
				<view>｜</view>
				<view class="" :class="isLast ? 'text-color-hint' : ''" @click="onActionClick('down')"><text>下移</text></view>
				<view>｜</view>
				<view class="" :class="sort===0 ? 'text-color-hint' : ''" @click="onActionClick('top')"><text>置顶</text></view>
				<view>｜</view>
				<view class="" @click="onActionClick('del')"><text>删除</text></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, unref, watch, watchEffect } from 'vue'
	
	const props = defineProps({
		isLast: {
			type: Boolean
		},
		sort: {
			type: Number,
			default: 0
		},
		title: {
			type: String
		},
		mustState: {
			type: Number,
			default: 1 // 类型(1-填写项，2-单选项)
		},
		disabled: {
			type: Boolean,
			default: false
		},
		disabledTip: {
			type: String
		}
	})
	
	const emits = defineEmits(['onActionClick', 'update:title', 'update:mustState'])
	
	const onInput = ({ detail }) => {
		emits('update:title', detail.value)
	}
	
	const onCheckChange = (val) => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		emits('update:mustState', val === true ? 2 : 1)
	}
	
	const onActionClick = (type) => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		switch (type) {
			case 'up':
				if (props.sort === 0) return
				break
			case 'down':
				if (props.isLast) return
				break
			case 'top':
				if (props.sort === 0) return
				break
			default:
		}
		emits('onActionClick', type, props.modelValue, props.sort)
	}
</script>
